<template>
	<view class="chanInfoDetail">
		<view class="top">
			<swiper :indicator-dots="true" indicator-color="#fff" :indicator-active-color="bagColor" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item><image src="../../static/1.jpg"></image></swiper-item>
				<swiper-item><image src="../../static/1.jpg"></image></swiper-item>
			</swiper>
			<view class="title">
				<view class="one" @tap="goChangeData"><i class="iconfont iconzuojiantou"></i></view>
				<view class="two"><text>保存</text></view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="con_type">
				<view class="first">
					<view class="shang">
						<text>王美丽</text>
						<i class="iconfont iconnv"></i>
						<text>18岁</text>
					</view>
					<view class="zhong">
						<image src="../../static/zhiwei.png"></image>
						<text>高级技术工作者</text>
					</view>
					<view class="zhong">
						<image src="../../static/location.png"></image>
						<text>郑州</text>
					</view>
					<view class="zhong">
						<image src="../../static/distance.png"></image>
						<text>500m左右</text>
					</view>
				</view>
				<view class="right_img" @tap="goChangeData"><image src="../../static/xia.png"></image></view>
			</view>
			<view class="con_bottom">毕业于北京理工大学,在校期间无所不能，拿了很多证书，之后找工作非常顺利。</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bagColor: 'rgba(255,255,255,0.2)'
		};
	},
	methods:{
		goChangeData (){
			uni.navigateBack({
				delta:1
			})
		}
	}
};
</script>

<style lang="less" scoped>
.chanInfoDetail {
	width: 100%;
	.top {
		width: 100%;
		height: 750rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		swiper {
			width: 100%;
			height: 100%;
		}
		.title {
			position: absolute;
			z-index: 10;
			top: 20rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 40rpx 40rpx 0 40rpx;
			box-sizing: border-box;
			.one {
				width: 110rpx;
				height: 110rpx;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 55px;
				text-align: center;
				line-height: 110rpx;
				i {
					color: #fff;
					font-weight: bold;
					font-size: 30rpx;
				}
			}
			.two {
				width: 110rpx;
				height: 110rpx;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 55px;
				text-align: center;
				line-height: 110rpx;
				text {
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
	//内容
	.content {
		width: 100%;
		padding: 35rpx;
		box-sizing: border-box;
		background-color: #fff;
		.con_type {
			display: flex;
			justify-content: space-between;
			.first {
				.shang {
					text {
						&:nth-child(1) {
							font-size: 36rpx;
							font-family: PingFang SC;
							font-weight: 600;
							color: rgba(51, 51, 51, 1);
						}
						&:nth-child(3) {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: rgba(102, 102, 102, 1);
						}
					}
					i {
						color: #ffb3b3;
						font-size: 30rpx;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}
				}
				.zhong{
					image{
						width: 40rpx;
						height: 40rpx;
						vertical-align: -10rpx;
						margin-right: 10rpx;
					}
					text{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(153,153,153,1);
					}
					
				}
			}
			.right_img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				flex-shrink: 0;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
		.con_bottom{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			margin-top: 50rpx;
		}
	}
}
</style>
